<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>管理员设置</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="css/slide.css" />
		<style>
			#uniocn {
				box-sizing: border-box;
				padding: 15px 100px;
			}
		</style>
	</head>

	<body>
		<div id="uniocn" class="layui-layout layui-layout-admin">

			<div class="finance-title" style="background: #fff;">
				<button id="addNew" class="layui-btn">添加管理员</button>
			</div>

			<div class="table">
				<table class="layui-hide" id="demo" lay-filter="demo"></table>
				<script type="text/html" id="barDemo">
					<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
					<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delect">删除</a>
				</script>
			</div>
		</div>

		<!--添加幻灯片-->
		<div class="alear_a">
			
			<form class="layui-form" action="">

				<!--<div class="layui-form-item">
					<label class="layui-form-label">显示位置</label>
					<div class="layui-input-block">
						<select>
							<option value=""></option>
							<option value="0">首页</option>
							<option value="1">优惠券</option>
						</select>
					</div>
				</div>-->

				<div class="layui-form-item">
					<label class="layui-form-label">微信号</label>
					<div class="layui-input-block">
						<input type="text" placeholder="请输入微信号" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">通知权限</label>
					<div class="layui-input-block">
						<input type="radio" name="notice" value="是" title="是">
						<input type="radio" name="notice" value="无" title="无" checked>
					</div>
					<p style="font-size: 14px;color: #999;">可以接受到通知模板消息</p>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">审核权限</label>
					<div class="layui-input-block">
						<input type="radio" name="examine" value="是" title="是">
						<input type="radio" name="examine" value="无" title="无" checked>
					</div>
					<p style="font-size: 14px;color: #999;">可以在前台直接审核掌上信息发帖、商户入驻、商品发布、分销商申请等</p>
				</div>
			</form>
			
		</div>
		
		<!--通知权限-->
		<script type="text/html" id="checkboxTpl1">
			<input type="checkbox" name="notice" value="{{d.id}}" title="开启" lay-filter="lockDemo1" {{ d.id==1 ? 'checked' : '' }}>
		</script>
		
		<!--审核权限-->
		<script type="text/html" id="checkboxTpl2">
			<input type="checkbox" name="examine" value="{{d.id}}" title="开启" lay-filter="lockDemo2" {{ d.id==1 ? 'checked' : '' }}>
		</script>
	</body>

	<script src="layui/layui.js"></script>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script>

		layui.use(['element', 'layer', 'table', 'form', 'upload'], function() {
			var element = layui.element,
				layer = layui.layer,
				table = layui.table,
				form = layui.form,
				upload = layui.upload;

			$('#addNew').click(function() {
				layer.open({
					title: '添加管理员',
					type: 1,
					area: '600px',
					content: $('.alear_a'),
					btn: ['提交', '取消'],
					btnAlign: 'c',
					yes: function(index, layero) {
						layer.msg('提交成功', {
							time: 2000,
						});
						layer.close(index);
					}
				});
			})

			//
			table.render({
				elem: '#demo',
				cols: [
					[ //标题栏
						{
							field: 'id',
							title: 'id',
							align: 'center',
						},
						{
							field: 'name',
							title: '管理员名称',
							align: 'center',
						}, {
							field: 'lock',
							title: '通知权限',
							align: 'center',
							templet: '#checkboxTpl1',
							unresize: true
						}, {
							field: 'lock',
							title: '审核权限',
							align: 'center',
							templet: '#checkboxTpl2',
							unresize: true
						}, {
							fixed: 'right',
							title: '操作',
							align: 'center',
							width: 300,
							toolbar: '#barDemo'
						}
					]
				],

				data: [{
					"id": 0,
					"name": "zxy",
				}, {
					"id": 0,
					"name": "zxy",
				}],

				page: true, //是否显示分页

				limit: 10 //每页默认显示的数量

			});

			//监听通知权限操作
			form.on('checkbox(lockDemo1)', function(obj) {
				console.log(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
			})

			//监听审核权限操作
			form.on('checkbox(lockDemo2)', function(obj) {
				console.log(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
			})

			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if(obj.event === 'edit') { //编辑
					layer.open({
						title: '编辑',
						type: 1,
						area: '600px',
						content: $('.alear_a'),
						btn: ['提交', '取消'],
						btnAlign: 'c',
						yes: function(index, layero) {
							layer.msg('提交成功', {
								time: 2000,
							});
							layer.close(index);
						}
					});
				} else if(obj.event === 'delect') { //删除
					layer.confirm('确认删除吗？', function(index) {
						obj.del();
						layer.close(index);
					});
				}
			})

		})
	</script>

</html>